<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入药品名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <el-table stripe
              :data="tableData"
              border
              class="mt-20">
      <el-table-column label="头像"
                       min-width="50">
        <template slot-scope="scope">
          <el-avatar :size="50">
            <el-image :src="scope.row.drugLib.imageUrl"
                      :preview-src-list="[scope.row.drugLib.imageUrl]">
            </el-image>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="drugLib.name"
                       label="药品名称">
      </el-table-column>
      <el-table-column prop="hospitalName"
                       label="机构名称">
      </el-table-column>
      <el-table-column prop="option"
                       label="操作"
                       align="center"
                       width="120">
        <template slot-scope="scope">
          <el-button type="danger"
                     @click="handleDel(scope.row)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="initList"
          :pageTotal="pageTotal"
          ref="page"></page>

    <el-dialog title="添加热销药品"
               :visible.sync="centerDialogVisible"
               width="30%"
               center>
      选择药品：
      <el-select v-model="drugId"
                 filterable
                 remote
                 reserve-keyword
                 placeholder="请输入关键词"
                 :remote-method="remoteMethod"
                 :loading="loading">
        <el-option v-for="item in options"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addHotDrug">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "hotDrugList",
    data () {
      return {
        loading: false,
        searchCondition: "",
        centerDialogVisible: false,
        pageTotal: 0,
        tableData: [],
        options: [],
        drugId: null
      }
    },
    created () {
      this.initList();
    },
    methods: {
      remoteMethod (text) {
        let param = {
          searchCondition: text,
          pageSize: 50,
          pageIndex: 0
        };
        this.post(this.api.drug.getUnHotDrug, param).then((res) => {
          if (res.data.code === '200') {
            this.options = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      handleAdd () {
        this.centerDialogVisible = true;
        this.drugId = null;
        this.remoteMethod("");
      },
      handleQuery () {
        this.page.pageIndex = 0;
        this.initList();
      },
      initList () {
        let param = {
          searchCondition: this.searchCondition
        }
        this.ajax({
          type: "post",
          url: this.api.drug.getHotDrugPageApp,
          data: Object.assign({}, this.page, param),
          success: (data) => {
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      handleDel (row) {
        this.ajax({
          type: "post",
          url: this.api.drug.deleteHotDrug,
          data: Object.assign({}, this.page, { id: row.id }),
          success: (data) => {
            this.initList();
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      addHotDrug () {
        if (!this.drugId) {
          this.$Message.error("请选择药品");
          return;
        }
        this.post(this.api.drug.addHotDrug, { drugLibId: this.drugId }).then((res) => {
          if (res.data.code === '200') {
            this.centerDialogVisible = false;
            this.initList();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style scoped>
</style>
